import LayoutWhite from "@/components/LayoutWhite";
import Title from "@/components/Title";
import Titles from "@/components/Titles";
import { Button, Form, Input, message } from "antd";
import { useState } from "react";
import { useTabsContext } from "@/contexts/TabsContext";
import EditOr from "./components/edit";
import { changeWordList } from "@/api/modules/word";

const shopCar = () => {
	const [formVal, setFormVal] = useState<any>({});
	console.log(formVal);
	const { delTabs } = useTabsContext();
	console.log(delTabs);
	const [from] = Form.useForm();
	const onFinish = (values: any) => {
		setFormVal(values);
		delTabs("/book/add");
		changeWordList({
			title: values?.code,
			image: "http://111.png",
			orderNum: values?.name,
			description: formVal?.content
		}).then(() => {
			message.success("新增成功");
			delTabs("/book/add");
		});
	};

	const goBack = () => {
		delTabs("/staff/add");
	};

	// 拓展按钮 可传可不传
	const moreButton = () => {
		return "";
	};

	const submit = () => {
		from.submit();
	};

	return (
		<LayoutWhite>
			<Title word={"新增文章"} more={moreButton()} />
			<Form
				name="basic"
				form={from}
				labelCol={{ span: 8 }}
				wrapperCol={{ span: 8 }}
				style={{ width: "100%", padding: "20px 0px" }}
				initialValues={{ remember: true }}
				onFinish={onFinish}
				onFinishFailed={() => message.info("请输入必填项")}
				autoComplete="off"
			>
				<Titles title={"基本信息"} />
				<Form.Item label="文章标题" name="code" rules={[{ required: true, message: "请输入人员编码" }]}>
					<Input placeholder="请输入人员编码" />
				</Form.Item>

				<Form.Item label="文章封面" name="img" rules={[{ required: true, message: "请输入人员名称" }]}>
					<Input placeholder="请输入人员名称" />
				</Form.Item>

				<Form.Item label="优先级" name="name" rules={[{ required: true, message: "请输入人员名称" }]}>
					<Input placeholder="请输入人员名称" />
				</Form.Item>

				<Titles title={"文章详情"} />
				<EditOr
					updateHtml={(e: any) => {
						setFormVal({ ...formVal, content: e });
					}}
					is={false}
				/>
			</Form>
			<Title word={""} more={moreButton()} />
			<div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
				<Button style={{ marginRight: "30px" }} onClick={() => goBack()}>
					返回
				</Button>
				<Button type="primary" onClick={() => submit()}>
					确认保存
				</Button>
			</div>
		</LayoutWhite>
	);
};

export default shopCar;
